import React, { Component, startTransition } from "react";
import { flushSync } from "react-dom";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  // componentDidMount() {
  //   setTimeout(() => {
  //     // this.setState({
  //     //   count: 1,
  //     // });
  //     // console.log(this.state.count);
  //     this.setState({
  //       count: 1,
  //     });
  //     console.log(this.state.count);
  //     this.setState({
  //       count: 2,
  //     });
  //     console.log(this.state.count);
  //   }, 10);
  // }
  render() {
    console.log("render:", this.state.count);
    const arr = [];
    for (let i = 0; i < 1000; i++) {
      arr.push(<div>{this.state.count}</div>);
    }
    return (
      <div
        onClick={() => {
          startTransition(() => {
            this.setState({
              // count: this.state.count + 1,
              count: 2,
            }); // 这个更新会立即刷新（非批处理）
          });
          this.setState({
            // count: this.state.count + 1,
            count: 1,
          }); // 这个更新会立即刷新（非批处理）
          // this.setState({
          //   // count: this.state.count + 1,
          //   count: 2,
          // }); // 这个更新会立即刷新（非批处理）
        }}
      >
        {this.state.count}
        {/* {arr.map((item) => item)} */}
      </div>
    );
  }
}
